<template>
    <div>
        <el-button type="primary" class="add_btn" icon="el-icon-plus" size="small" @click="showCreateDialogForm">
            添加菜单
        </el-button>
        <el-container>
            <el-aside width="200px" class="aside_box">
                <div class="aside_title">系统目录结构</div>
                <el-tree
                        :data="menuList"
                        :props="defaultProps"
                        class="terminal_tree"
                        highlight-current
                        check-on-click-node
                        node-key="id"
                        :default-expanded-keys="[0]"
                        @node-click="handleCheckChange">
                </el-tree>
            </el-aside>
            <el-container class="table_content">
                <div style="width: 100%">
                    <el-table
                            size="small"
                            border
                            :data="tableList"
                            tooltip-effect="dark"
                            v-loading="searchLoading"
                            style="width: 100%"
                            :header-cell-style="{backgroundColor:'#fafafa',fontSize:'15px',color:'#333333'}"
                            :cell-style="{fontSize:'15px'}"
                    >
                        <el-table-column
                                type="index"
                                width="70"
                                fixed="left"
                                align="center"
                                label="序号">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                align="center"
                                label="菜单名">
                        </el-table-column>
                        <el-table-column
                                prop="icon"
                                align="center"
                                label="菜单图标">
                        </el-table-column>
                        <el-table-column
                                prop="url"
                                align="center"
                                label="菜单url">
                        </el-table-column>
                        <el-table-column
                                prop="description"
                                label="描述"
                                align="center"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="pidName"
                                label="父级"
                                align="center"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                align="center"
                                min-width="220">
                            <template slot-scope="scope">
                                <el-button @click="showMenuDetail(scope.row)" size="mini">查看
                                </el-button>
                                <el-button @click="showUpdateDialogForm(scope.row)" type="primary" size="mini">编辑
                                </el-button>
                                <el-button @click="showDeleteDialogForm(scope.row)" type="danger" size="mini">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination_box">
                        <div class="pagination_box_content">
                            <el-pagination
                                    background
                                    @current-change="handleCurrentChange"
                                    :current-page="formSearch.pageNum"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :page-size="formSearch.pageSize"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-container>
        </el-container>
        <CreateDialogForm width="40%" title="添加菜单" :dialogFormVisible="createDialogFormVisible" :form="form"
                          :hideDialog="hideCreateDialogForm"
                          :submit="addMenu" :columns="columns"
                          :loading="addMenuLoading" :error="error"/>
        <UpdateDialogForm width="40%" title="修改菜单" :dialogFormVisible="updateDialogFormVisible"
                          :hideDialog="hideUpdateDialogForm"
                          :submit="updateMenu" :updateItem="updateItem" :columns="columns" :form="form"
                          :loading="updateMenuLoading" :error="error"/>
        <MenuDetail :detailData="detailData" :visible="menuDetailShow"
                    :hideDialog="hideMenuDetail"></MenuDetail>
        <el-dialog
                title="提示"
                :visible.sync="deleteDialogShow"
                :close-on-click-modal="false"
                width="400px"
                center>
            <div class="icon_question">?</div>
            <span>您选择了1条数据记录是否确认删除?</span>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialogShow=false;deleteRow = {}">取 消</el-button>
                    <el-button type="primary" @click="deleteMenu">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>
<script>
    import AutoSelectForm from '@/components/common/AutoSelectForm'
    import service from '@/api/service'
    import CreateDialogForm from '@/components/common/CreateDialogForm'
    import UpdateDialogForm from '@/components/common/UpdateDialogForm'
    import MenuDetail from './container/menu/MenuDetail'

    export default {
        name: 'menu',
        data() {
            return {
                formSearch: {
                    pageNum: 1,
                    pageSize: 10,
                    checkMenuId: ''
                },
                total: 0,
                pages: 0,
                tableList: [],
                error: false,
                createDialogFormVisible: false,
                addMenuLoading: false,
                updateDialogFormVisible: false,
                updateMenuLoading: false,
                updateItem: {},
                form: {
                    name: "",
                    url: "",
                    icon: "",
                    pid: [],
                    description: '',
                    sorts: '',
                },
                columns: [
                    {
                        label: '菜单名',
                        fieldName: 'name',
                        type: "input",
                        rules: [
                            {required: true, message: '请填写菜单名', trigger: 'blur'}
                        ]
                    },
                    {
                        label: '菜单url',
                        fieldName: 'url',
                        type: "input",
                        rules: [
                            {required: true, message: '请填写菜单url', trigger: 'blur'}
                        ]
                    },
                    {
                        label: '菜单图标',
                        fieldName: 'icon',
                        type: "upload",
                        rules: []
                    },
                    {
                        label: '父级',
                        fieldName: 'pid',
                        type: "autoCascader",
                        dataType: "menu",
                        changeOnSelect: true,
                        rules: []
                    },
                    {
                        label: '文字描述',
                        fieldName: 'description',
                        type: "textarea",
                        rules: []
                    },
                    {
                        label: '排序',
                        fieldName: 'sorts',
                        type: "inputNumber",
                        rules: [{required: true, message: '请填写排序', trigger: 'blur'}]
                    }
                ],
                menuDetailShow: false,
                detailData: {},
                searchLoading: false,
                deleteDialogShow: false,
                deleteRow: {},
                defaultProps: {
                    children: 'subMenus',
                    label: 'name',
                    value: "id",
                },
                menuList: []
            }
        },
        methods: {
            async handleCheckChange(data) {
                this.formSearch.checkMenuId = data.id
                this.formSearch.pageNum = 1
                let formData = {
                    pageNum: 1,
                    pageSize: this.formSearch.pageSize,
                    id: data.id
                }
                this.searchLoading = true
                const res = await service.searchMenus(formData)
                this.searchLoading = false
                if (res.status < 400) {
                    this.formSearch.pageNum = res.res.pageNum
                    this.formSearch.pageSize = res.res.pageSize
                    this.total = res.res.total
                    this.pages = res.res.pages
                    this.tableList = res.res.result ? res.res.result.map(item => {
                        return Object.assign({}, item, {
                            pidName: this.getPidName(this.menuList, item.pid)
                        })
                    }) : []
                }
            },
            //分页
            handleCurrentChange(pageNum) {
                this.formSearch.pageNum = pageNum
                this.searchCommon()
            },
            async searchCommon() {
                let formData = {
                    pageNum: this.formSearch.pageNum,
                    pageSize: this.formSearch.pageSize,
                    id: this.formSearch.checkMenuId
                }
                this.searchLoading = true
                const res = await service.searchMenus(formData)
                this.searchLoading = false
                if (res.status < 400) {
                    this.formSearch.pageNum = res.res.pageNum
                    this.formSearch.pageSize = res.res.pageSize
                    this.total = res.res.total
                    this.pages = res.res.pages
                    this.tableList = res.res.result ? res.res.result.map(item => {
                        return Object.assign({}, item, {
                            pidName: this.getPidName(this.menuList, item.pid)
                        })
                    }) : []
                }
            },
            //新增
            showCreateDialogForm() {
                this.createDialogFormVisible = true
            },
            hideCreateDialogForm() {
                this.createDialogFormVisible = false
                this.error = false
            },
            async addMenu(data) {
                this.addMenuLoading = true
                const res = await service.addMenu({
                    ...data,
                    pid: data.pid[data.pid.length - 1]
                })
                this.addMenuLoading = false
                if (res.status < 400) {
                    this.createDialogFormVisible = false
                    this.error = false
                } else {
                    this.error = true
                }
            },
            //获取父级id
            getPidArr(list, id) {
                let arr = []
                let map = (l, i) => {
                    l.forEach(item => {
                        if (item.id === i) {
                            arr.push(i)
                            map(list, item.pid)
                        } else if (item.subMenus) {
                            map(item.subMenus, i)
                        }
                        return
                    })
                }
                map(list, id)
                return arr.reverse()
            },
            //获取父级name
            getPidName(list, id) {
                let name = ''
                let map = (l, i) => {
                    l.forEach(item => {
                        if (item.id === i) {
                            name = item.name
                        } else if (item.subMenus) {
                            map(item.subMenus, i)
                        }
                        return
                    })
                }
                map(list, id)
                return name
            },
            //修改
            showUpdateDialogForm(row) {
                this.updateDialogFormVisible = true
                this.$nextTick(function () {
                    this.updateItem = {
                        ...row,
                        icon: row.icon,
                        pid: this.getPidArr(this.menuList, row.pid)
                    }
                    this.form = Object.assign({}, this.form, {
                        name: row.name,
                        url: row.url,
                        icon: row.icon,
                        pid: this.getPidArr(this.menuList, row.pid),
                        description: row.description,
                        sorts: row.sorts
                    })
                })
            },
            hideUpdateDialogForm() {
                this.updateDialogFormVisible = false
                this.error = false
                this.updateItem = {}
                this.form = {
                    name: "",
                    url: "",
                    icon: [],
                    pid: [],
                    description: '',
                    sorts: ''
                }
            },
            async updateMenu(data) {
                this.updateMenuLoading = true
                const res = await service.updateMenu({
                    ...data,
                    pid: data.pid[data.pid.length - 1]
                })
                this.updateMenuLoading = false
                if (res.status < 400) {
                    this.tableList = this.tableList.map(item => {
                        if (item.id === data.id) {
                            return Object.assign({}, item, data)
                        }
                        return item
                    })
                    this.updateDialogFormVisible = false
                    this.error = false
                } else {
                    this.error = true
                }
            },
            //查看详情
            showMenuDetail(row) {
                this.menuDetailShow = true
                this.detailData = row
            },
            hideMenuDetail() {
                this.menuDetailShow = false
                this.detailData = {}
            },
            //删除
            showDeleteDialogForm(row) {
                this.deleteRow = row
                this.deleteDialogShow = true
            },
            async deleteMenu() {
                const res = await service.deleteMenu({
                    id: this.deleteRow.id
                })
                if (res.status < 400) {
                    this.tableList = this.tableList.filter(item => {
                        return item.id !== this.deleteRow.id
                    })
                    this.deleteDialogShow = false
                    this.deleteRow = {}
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        duration: 3000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: '删除失败',
                        duration: 3000
                    });
                }
            }
        },
        async created() {
            const res = await service.getMenuTree();
            if (res.status < 400) {
                this.menuList = [
                    {
                        id: 0,
                        name: '翼猫业务管理系统',
                        subMenus: res.res
                    }
                ]
            }
            this.searchCommon()
        },
        components: {
            AutoSelectForm,
            CreateDialogForm,
            UpdateDialogForm,
            MenuDetail
        }
    }
</script>
<style scoped lang="stylus">
    .aside_box
        margin: 17px 17px 17px 0
        border: 1px solid #E6E6E6
        background-color: #fff
        border-radius:4px
    .aside_title
        background-color #fff
        line-height 52px
        font-size 16px
        font-weight 500
        color rgba(51, 51, 51, 1)
        padding-left 20px
        border-bottom 1px solid #E6E6E6

    .terminal_tree
        font-size 14px
        font-weight 500
        line-height 20px
        letter-spacing 1px
        padding 14px
</style>
